{{define "cards"}} 

<script src="https://cdn.staticfile.org/xterm/3.14.5/xterm.js"></script>
<link href="https://cdn.staticfile.org/xterm/3.14.5/xterm.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/xterm/3.14.5/addons/fit/fit.js"></script>
<link href="https://cdn.staticfile.org/xterm/3.14.5/addons/fullscreen/fullscreen.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/xterm/3.14.5/addons/fullscreen/fullscreen.js"></script>

<div class="container"> 
    <div class="row">
        <div class="col-md-6">
            <br><video id="remote-video" controls="controls" autoplay class="m-0 p-0" style="width:100%; height:100%;object-fit:fill">等待初始化</video><br>
        </div>
  
        <div class="col-md-6">
            <br>
            <div class="card text-center">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" style="position: relative;">
                        <li class="nav-item">
                          <a class="nav-link active" onclick="sshShow()" id="ssh_nav">SSH</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" onclick="controlShow()" id="control_nav">Control</a>
                        </li>
                        <button type="button" class="btn btn-light m-1 py-0" onclick="fullscreenOpen()" id="fullscreen_btn" style="position:absolute;right:0px;"><i class="fas fa-expand-arrows-alt"></i></button>
                    </ul>
                </div>
    
                <div class="card-body" id="control_body" hidden>
                    <div class="input-group" style="width:100%;">
                        <textarea id="controlInput" placeholder='e.g. {"device_id":"led_0","operate":"on"}'rows="5" style="width:80%"></textarea>
                        <div class="input-group-append" style="float:left; 
                        overflow:hidden;width:20%;"><button class="btn btn-outline-secondary" style="width:100%" type="button" id="control-send" onclick="controlSend()" disabled>Send</button></div>
                    </div>
                    <br>
                    <div class="input-group" style="width:100%">
                        <textarea id="control_output" style="width:80%" rows="5" readonly></textarea>
                        <div class="input-group-append" style="float:left; 
                        overflow:hidden;width:20%;"><button class="btn btn-outline-secondary" style="width:100%" type="button" disabled>Receive</button></div>
                    </div>
                </div>
    
                <div class="card-body m-0 p-0" id="ssh_body">
                    <div class="container">
                        <div id="terminal" style="height:320px;width:100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="z-index: 9999; position: fixed ! important; right: 30px; top: 0px;" id="fullscreen_exit" hidden> <button type="button" class="btn btn-dark m-1" onclick="fullscreenClose()"><i class="fas fa-compress-arrows-alt"></i></button></div>
<br><br>

<script>
var sshDC;

function initSSH(){
    sshDC = pc.createDataChannel("SSH");
        
    term.clear();
    term.writeln("welcome to use WebRTC Remote Control");
    
    sshDC.onopen = function () {
        userInput();
        console.log("datachannel open");
    };

    sshDC.onmessage = function (event) {
        if(event.data != "success"){
            userInput();
            console.log(event.data);
        }else{
            term.clear();
            sshDC.send("resize "+term.cols+" "+term.rows);
            console.log("success resize "+term.cols+" "+term.rows);
            sshDC.onmessage = function (event) {
                inputCount = 0;
                term.write('\r\n');
                term.write(ab2str(event.data));
                console.log(ab2str(event.data));
            };
        }
    };

    sshDC.onclose = function () {
        console.log("datachannel close");
    };
}

function sshShow(){
    $("#ssh_body").attr("hidden",false);
    $("#fullscreen_btn").attr("hidden",false)
    $("#control_body").attr("hidden",true);
    $("#ssh_nav").addClass("active");
    $("#control_nav").removeClass("active");
}
</script>

<script>
var controlDC;

function initControl(){
    controlDC = pc.createDataChannel("Control");

    controlDC.onmessage = function (event) {
        console.log("received: " + event.data);
        $("#control_output").val(event.data);
    };

    controlDC.onopen = function () {
        $("#control-send").attr("disabled", false);
        console.log("datachannel open");
    };

    controlDC.onclose = function () {
        $("#control-send").attr("disabled", true);
        console.log("datachannel close");
    };
}

function controlSend(){
    var msg = $("#controlInput").val();
    controlDC.send(msg);
}

function controlShow(){
    $("#ssh_body").attr("hidden",true);
    $("#fullscreen_btn").attr("hidden",true)
    $("#control_body").attr("hidden",false);
    $("#ssh_nav").removeClass("active");
    $("#control_nav").addClass("active");
}
</script>

<script>
var term;
var input = '';
var pwTarget = false;
var userTarget = false;
var inputCount = 0;

function initTerm(){
    Terminal.applyAddon(fit);  // Apply the `fit` addon
    Terminal.applyAddon(fullscreen);

    let terminalContainer = document.getElementById('terminal');
    term = new Terminal({cursorBlink: true})

    term.open(terminalContainer);
    term._initialized = true;
    term.fit();

    term.writeln("welcome to use WebRTC Remote Control");

    term.on("paste", function(data) {
      term.write(data);
    });

    term.on("resize", function(ev){
        console.log("resize: cols:",term.cols," rows:",term.rows);
        sshDC.send("resize "+term.cols+" "+term.rows);
    });

    term.on("key", function(key,ev){
        if(userTarget == true){
            if(ev.keyCode === 13){
                term.write('\r\n');
                sshDC.send(input);
                input = '';
                passwordInput();
            }else if (ev.keyCode === 8) {
                if (input.length > 0) {
                    term.write('\b \b');
                    input = input.substr(0, input.length - 1);
                }
            }else{
                input += key;
                term.write(key);
            }
        }else if(pwTarget == true){
            if(ev.keyCode === 13){
                term.write('\r\n');
                sshDC.send(input);
                input = '';
                pwTarget = false;
            }else if (ev.keyCode === 8) {
                if (input.length > 0) {
                    term.write('\b \b');
                    input = input.substr(0, input.length - 1);
                }
            }else{
                input += key;
                term.write("*");
            }
        }else {
            sshDC.send(key);
            if(ev.keyCode === 8){
                if(inputCount > 0){
                    inputCount = inputCount - 1;
                    term.write('\b \b');
                }
            }else{
                term.write(key);
                inputCount = inputCount + 1;
            }
        }
    })
}

function userInput(){
    term.writeln("~$ user:");
    term.write("~$ ");
    userTarget = true;
}

function passwordInput(){
    userTarget = false;
    term.writeln("~$ passward:");
    term.write("~$ ");
    pwTarget = true;
}

function ab2str(buf) {
    return String.fromCharCode.apply(null, new Uint8Array(buf));
}

function fullscreenOpen(){
    $("#fullscreen_exit").attr("hidden",false)
    term.toggleFullScreen();
    term.resize(parseInt($(window).width()/9),parseInt($(window).height()/18));
    term.scrollToBottom();
}

function fullscreenClose(){
    $("#fullscreen_exit").attr("hidden",true)
    term.toggleFullScreen();
    term.fit();  
    term.scrollToBottom(); 
}
</script>
      
{{end}}